<template>
  <el-carousel :height="'600px'" :interval="3000" arrow="always">
    <el-carousel-item v-for="banner in banner_list" :key="banner.id">
      <a :href="banner.link">
        <img :src="banner.image_url" class="carousel-img">
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: "BannerComp",
  data() {
    return {
      banner_list: []
    };
  },
  created() {
    this.get_banner_list();
  },
  methods: {
    get_banner_list() {
      this.$axios
          .get(`${this.$settings.HOST}/home/banner/`)
          .then(response => {
            this.banner_list = response.data;
          })
          .catch(error => console.log(error));
    }
  }
};
</script>

<style scoped>
.el-carousel,
.el-carousel__item {
  height: 690px; /* 高度固定为视口高度 */
}

.carousel-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
}
</style>
